<template>
    <scroll-view scroll-x class="scroll-view_H">
        <view class="m-tab">
            <view class="m-tab-item" v-for="item in datas">
                <text>{{ item.name }}</text>
                <view class="m-tab-item-bar"></view>
            </view>
        </view>
    </scroll-view>
</template>

<script lang="ts" setup generic="T extends {name:string}">
const props = defineProps({
    datas: { type: Array<T>, requierd: true }
})
</script>

<style lang="scss" scoped>
.m-tab {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}
.m-tab-item {
    flex-grow: 1;
    white-space: nowrap;
    text-align: center;
    overflow: ellipsis;
    position: relative;
    padding: $uni-spacing-col-base;
}
.m-tab-item-bar {
    position: absolute;
    bottom: 0;
    height: 5rpx;
    background-color: red;
    width: 100%;
}
.tui-tabs-slider {
    position: absolute;
    left: 0;
    transition: all 0.15s ease-in-out;
    z-index: 1;
    transform-style: preserve-3d;
}
.scroll-view_H {
    white-space: nowrap;
    width: 100%;
}
</style>
